@extends('admin.base')
<!--订单列表-->
@section('content')
    <div class="layui-card">
        <div class="layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form">
                <div class="layui-input-inline">
                    <input type="text" name="mobile" id="mobile" placeholder="收件人手机号" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="start_time" id="start_time" placeholder="开始时间" value="">
                </div>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="end_time" id="end_time" placeholder="截止时间" value="">
                </div>
                <div class="layui-input-inline">
                    <select name="status" id="status">
                        <option value="">订单状态</option>
                        <option value="1">未支付</option>
                        <option value="2">待发货</option>
                        <option value="3">待收货</option>
                        <option value="4">待评价</option>
                        <option value="6">已评价</option>
                        <option value="5">退款</option>
                    </select>
                </div>
                <button class="layui-btn" id="searchBtn">搜 索</button>
            </div>
        </div>
        <div class="layui-card-body">
            <table id="dataTable" lay-filter="dataTable"></table>
            <script type="text/html" id="options">
                <div class="layui-btn-group">
                    @{{# if(d.status == 1) { }}
                    <a class="layui-btn layui-btn-sm" title="查询支付结果" lay-event="orderQuery">支付结果</a>
                    @{{#  } }}
                    @{{# if(d.status == 2  ) { }}
                    <a class="layui-btn layui-btn-danger layui-btn-sm" title="" lay-event="orderRefund">拒单退款</a>
                    @{{#  } }}
                </div>
            </script>
            {{--订单商品--}}
            <script type="text/html" id="orderProducts">
                @{{#  layui.each(d.snapshoot, function(index, item){ }}
                <p>@{{ item.product_title }} --- @{{ item.sku_title }} &nbsp; 单价：@{{ item.sold_price }} &nbsp; 数量：@{{ item.buynum }}</p>
                @{{# }); }}
            </script>
        </div>
    </div>
@endsection

@section('script')
    <script>
        layui.use(['layer', 'table', 'form','laydate'], function () {
            var $ = layui.jquery;
            var layer = layui.layer;
            var form = layui.form;
            var table = layui.table;
            var laydate = layui.laydate;
            laydate.render({elem:'#start_time',type:'datetime'});
            laydate.render({elem:'#end_time',type:'datetime'});

            //商品表格初始化
            var dataTable = table.render({
                elem: '#dataTable'
                , autoSort: false
                , height: 'auto'
                , url: "{{ route('order.data') }}"  //todo 带上原始筛选参数和分页参数
                , page: true //开启分页
                ,limit: 30
                ,where: {
                    mobile: $("#mobile").val(),start_time: $("#start_time").val(),
                    end_time: $("#end_time").val(), status: $("#status").val(),
                }
                , cols: [[ //表头
                    {field: 'no', title: '订单号',width: 130}
                    ,
                    // {field: 'user.mobile',title: '支付手机号',width:120, templet: function (d) {
                    //         return d.user?.mobile ?? '';
                    //     }}
                    {field: 'address',title: '收货人',width:120, templet: function (d) {
                            return d.address?d.address.consignee : '';
                        }}
                    , {field: 'time_end', title: '支付时间', templet:function (d) {
                            return d.time_end ? d.time_end.substring(0,16) : '';
                        },width:150}
                    , {field: 'title', title: '订单商品', toolbar: "#orderProducts", width: 300}
                    , {field: 'cash_money', title: '金额',templet:function (d) {
                            return d.cash_money;
                        },width: 80}
                    , {field: 'mobile', title: '收件手机号',width:120, templet: function (d) {
                            return d.address?d.address.consignee_mobile : '';
                        }}
                        , {field: 'address', title: '收货信息',width:300, templet: function (d) {
                            return d.address ?  d.address.district + d.address.detail  : '';
                        }}
                    , {field: 'status', title: '订单状态',width:100,templet:function (d) {
                            //订单状态：1：待支付；2：待发货；3：待收货；4：待评价；5：退款。
                            switch (d.status) {
                                case "1":
                                    return "<span style='color: orange'>待支付</span>";
                                    break;
                                case "2":
                                    return "<span style='color: red'>待发货</span>";
                                    break;
                                case "3":
                                    return "<span style='color: black'>待收货</span>";
                                    break;
                                case '4':
                                    return '待评价';
                                    break;
                                case '5':
                                    return '退款';
                                    break;
                                case '6':
                                    return '已评价';
                                    break;
                                default :
                                    return "未知";
                                    break;
                            }
                      }}
                    , {field: 'delivery', title: '物流单号',edit:'text',width:150}
                    , {title: '操作',toolbar: '#options'}
                ]]
            });

            //监听工具条
            table.on('tool(dataTable)', function (obj) { //注：tool是工具条事件名，dataTable是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                    , layEvent = obj.event; //获得 lay-event 对应的值
                if (layEvent === 'edit') {//编辑
                    //todo  不能写死
                    //todo  跳转到编辑页面时带上查询条件和分页参数，以便编辑完成之后再跳转回编辑页面
                    location.href = '/order/' + data.id + '/edit';
                }else if(layEvent === 'orderQuery') {//查询订单支付状态
                    let no = data.no;
                    $.ajax({
                        url: '/order/payment_query/' + no,
                        dataType: 'json',
                        method: 'GET',
                        success: function (res) {
                            if (res.data.status == true) {
                                layer.msg(res.data.return_msg, {icon: 1,time: 2000})
                            }else {
                                layer.msg(res.data.return_msg, {icon: 2})
                            }
                        }
                    })
                }else if(layEvent === 'orderRefund') {//查询订单支付状态
                    let no = data.no;
                    layer.confirm("是否确认拒单退款操作？",function (index) {
                        $.ajax({
                            url: '/order/refund',
                            dataType:"json",
                            data:{'order_no':no},
                            method: 'POST',
                            success: function (res) {
                                if (res.data.status == true) {
                                    layer.msg(res.data.return_msg, {icon: 1,time: 2000})
                                }else {
                                    layer.msg(res.data.return_msg, {icon: 2})
                                }
                            }
                        })
                    })
                }
            });

            //监听单元格编辑，修改订单物流信息
            table.on('edit(dataTable)',function (obj) {
                var id = obj.data.id;
                var value = obj.value;
                var load = layer.load();
                $.post("{{ route('order.delivery') }}", {
                    id: id,delivery: value
                }, function (res) {
                    layer.close(load);
                    if (res.code === 0) {
                        layer.msg(res.msg, {icon: 1});
                        //更新当前行数据
                        obj.update({
                            status: '3'
                        });
                    } else {
                        layer.msg(res.msg, {icon: 2})
                    }
                });
            });
            //行单击事件,当前行添加额外样式
            table.on('row(dataTable)',function (obj) {
                $(".layui-table-body tr ").attr({"style":"background:#FFFFFF"});//其他tr恢复原样
                $(obj.tr.selector).attr({"style":"background:#dbefdb"});//改变当前tr颜色
            })
            //搜索
            $("#searchBtn").click(function () {
                var mobile = $("#mobile").val();
                var start_time = $("#start_time").val();
                var end_time = $("#end_time").val();
                var status = $("#status").val();
                dataTable.reload({
                    where: {mobile: mobile, start_time: start_time, end_time: end_time,status: status},
                    page: {curr: 1}
                })
            })
        })
    </script>
    <style>
        /*表格内容高度自适应*/
        .layui-table-cell {
            height: auto;
        }
    </style>
@endsection
